<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <el-card>
        <el-row type="flex" align="middle">
          <el-col :span="3">
            <img v-imgError="defaultImg" :src="avator" class="user-avatar" style="width: 100px;height: 100px;border-radius: 50%;object-fit:cover;">
          </el-col>
          <el-col>
            <el-row style="font-size: 20px;"><span>{{ timeComputed }}</span>，{{ userName }}，祝你开心每一天！</el-row>
            <el-row style="font-size: 20px;color:#999">{{ userName }} | {{ company }}-{{ departmentName }}</el-row>
          </el-col>
        </el-row>
      </el-card>
      <el-row type="flex" style="margin-top:15px">
        <el-col :span="12">
          <workCalendar />
          <workNotice />
        </el-col>
        <el-col :span="12" style="margin-left: 20px">
          <workProcess @process-open="showDialog=true" />
          <workRadar />
          <workHelp />
        </el-col>
      </el-row>
      <!-- 离职申请单 -->
      <el-dialog :visible.sync="showDialog" title="离职申请" width="40%" @close="btnCancel">
        <el-form ref="ruleForm" label-width="120px" :rules="rules" :model="ruleForm">
          <el-form-item label="期望离职时间" prop="exceptTime">
            <el-date-picker v-model="ruleForm.exceptTime" />
          </el-form-item>
          <el-form-item label="离职原因" prop="reason">
            <el-input v-model="ruleForm.reason" type="textarea" style="width:80%" />
          </el-form-item>
        </el-form>
        <el-row slot="footer" type="flex" justify="center">
          <el-button size="small" type="primary" @click="btnOK">确定</el-button>
          <el-button size="small" @click="btnCancel">取消</el-button>
        </el-row>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import workCalendar from './components/workCalendar'
import workProcess from './components/workProcess'
import workNotice from './components/workNotice'
import workRadar from './components/workRadar'
import workHelp from './components/workHelp'
import { startProcess } from '@/api/approvals'
export default {
  name: 'Dashboard',
  components: {
    workCalendar,
    workProcess,
    workNotice,
    workRadar,
    workHelp
  },
  data() {
    return {
      defaultImg: require('@/assets/common/head.jpg'),
      showDialog: false,
      ruleForm: {
        exceptTime: '',
        reason: '',
        processKey: 'process_dimission', // 特定的审批
        processName: '离职'
      },
      rules: {
        exceptTime: [{ required: true, message: '离职时间不能为空' }],
        reason: [{ required: true, message: '离职原因不能为空' }]
      }
    }
  },
  provide() {
    return {
      showDialog: this.showDialog
    }
  },
  computed: {
    ...mapGetters([
      'userName',
      'avator',
      'departmentName',
      'company',
      'userId'
    ]),
    timeComputed() {
      const date = new Date()
      return date.getHours() >= 18 ? '晚上好' : (date.getHours() > 12 ? '下午好' : '早上好')
    }
  },
  methods: {
    async btnOK() {
      try {
        await this.$refs.ruleForm.validate()
        const data = { ...this.ruleForm, userId: this.userId }
        console.log(data)
        const result = await startProcess(data)
        console.log(result)
        this.$message.success('提交流程成功')
        this.btnCancel()
      } catch (error) {
        console.log(error)
        this.$message.warning(error)
      } finally {
        this.showDialog = false
      }
    },
    btnCancel() {
      this.showDialog = false
      this.$refs.ruleForm.resetFields()
      this.ruleForm = {
        exceptTime: '',
        reason: '',
        processKey: 'process_dimission', // 特定的审批
        processName: '离职'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    // margin: 30px;
  }
  &-text {
    font-size: 30px;
    // line-height: 46px;
  }
}
</style>
